<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">筛选</view>
		</view>	

		<view class="clear_box"></view>

	
			<!-- <view class="title_box">车辆类型</view>
			<view class="nav">
				<block v-for="(item,index) in ctype_list" :key="index" >
					<view class="menu" :class="{selected : item.selected}" @tap="setContentMenu(ctype_list, index,0)">{{item.title}}</view>
				</block>
			</view> -->
		
		<view class="diyi">
			<view class="title_box01">自定义价格</view>
			<slider @change="sliderChange" v-model="price" step="1" min="0" max="100" block-size="20" activeColor="#FC5D20" blockColor="#FC5D20"/>
			<!-- <u-slider @change="price_change" v-model="price" step="1" min="0" max="100" activeColor="#FC5D20" blockColor="#FC5D20" ></u-slider> -->
			<view class="mokuai">
				<view>0</view>
				<view>20万</view>
				<view>40万</view>
				<view>60万</view>
				<view>80万</view>
				<view>80万以上</view>
			</view>
		</view>
		
		<view class="title_box">车龄</view>
		<view class="nav">
			<block v-for="(item,index) in age_list" :key="index" >
				<view class="menu" :class="{selected : item.selected}" @tap="setContentMenu(age_list, index,2)">{{item.name}}</view>
			</block>
		</view>
		
		
		<view class="diyi">
			<view class="title_box01">自定义排量</view>
			<slider @change="sliderChangeOut" v-model="output" step="1" min="0" max="5" block-size="20" activeColor="#FC5D20" blockColor="#FC5D20"/>
			<u-slider v-model="output" @change="output_change" step="1" min="0" max="5" activeColor="#FC5D20" blockColor="#FC5D20" ></u-slider>
			<view class="mokuai">
				<view>0</view>
				<view>1T/L</view>
				<view>2T/L</view>
				<view>3T/L</view>
				<view>4T/L</view>
				<view>不限</view>
			</view>
		</view>
		
	
			<view class="title_box">里程</view>
			<view class="nav">
				<block v-for="(item,idx) in mile_list" :key="idx">
					<view class="menu" :class="{selected: item.selected}" @tap="setContentMenu(mile_list, idx,4)">{{item.name}}</view>
				</block>
			</view>
			
			<!-- <view class="title_box">车身颜色</view>
			<view class="nav">
				<block v-for="(item,idx) in color_list" :key="idx">
					<view class="menu" :class="{selected: item.selected}" @tap="setContentMenu(color_list, idx,5)">{{item.name}}</view>
				</block>
			</view>
			
			<view class="title_box">国别</view>
			<view class="nav">
				<block v-for="(item,idx) in car_list" :key="idx">
					<view class="menu" :class="{selected: item.selected}" @tap="setContentMenu(car_list, idx,6)">{{item.name}}</view>
				</block>
			</view>
		
		
		<view class="title_box">产家类型</view>
		<view class="nav">
			<block v-for="(item,idx) in factory_list" :key="idx">
				<view class="menu" :class="{selected: item.selected}" @tap="setContentMenu(factory_list, idx,7)">{{item.name}}</view>
			</block>
		</view>
		
		<view class="title_box">排放标准</view>
		<view class="nav">
			<block v-for="(item,idx) in out_list" :key="idx">
				<view class="menu" :class="{selected: item.selected}" @tap="setContentMenu(out_list, idx,8)">{{item.name}}</view>
			</block>
		</view>
		
		<view class="title_box">能源类型</view>
		<view class="nav">
			<block v-for="(item,idx) in energy_list" :key="idx">
				<view class="menu" :class="{selected: item.selected}" @tap="setContentMenu(energy_list, idx,9)">{{item.name}}</view>
			</block>
		</view> -->
		
		<!-- <view class="title_box">车源标签</view>
		<view class="nav">
			<block v-for="(item,idx) in label_list" :key="idx" >
				<view class="menu" :class="{selected: item.selected}" @tap="setmoreMenu(label_list, idx,10)">{{item.title}}</view>
			</block>
		</view> -->
		<view class="" style="height: 10vh;">
			
		</view>

		<view class="footer">
			<view class="clear btn" @click="to_clear()" >清除</view>
			<view class="define"  @click="to_sure()" >确定</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: 0,
				output : 0,
				search_words:[
					{key:0, name: 'ctype_idx',value:''},
					{key:0, name: 'price_idx',value:''},
					{key:0, name: 'age_idx',value:''},
					// {key:0, name: 'price_idx',value:''},
					{key:0, name: 'ouput_idx',value:''},
					{key:0, name: 'mile_idx',value:''},
					{key:0, name: 'color_idx',value:''},
					{key:0, name: 'car_idx',value:''}, //国别
					{key:0, name: 'out_idx',value:''},
					{key:0, name: 'energy_idx',value:''},
					{key:0, name: 'label_idx',value:''},
				],
				age_list :[
					{selected : true,name: "不限"},
					{selected : false,name: "0-1年"},
					{selected : false,name: "1-3年"},
					{selected : false,name: "3-5年"},
					{selected : false,name: "5年以上"},
				],
				energy_list : [
					{selected : true,name: "不限"},
					{selected : false,name: "汽油"},
					{selected : false,name: "柴油"},
					{selected : false,name: "纯电动"},
					{selected : false,name: "油电混合"},
					{selected : false,name: "其他"},
				],
				out_list:[
					{selected : true,name: "不限"},
					{selected : false,name: "国三"},
					{selected : false,name: "国四"}, 
					{selected : false,name: "国五"},
					{selected : false,name: "国六"}, 
					{selected : false,name: "国一"},
					{selected : false,name: "欧一"},
					{selected : false,name: "欧二"}, 
					{selected : false,name: "欧三"},
					{selected : false,name: "欧四"}, 
					{selected : false,name: "欧五"},
					{selected : false,name: "欧六"}, 
					{selected : false,name: "纯电动"}, 	
				],
				factory_list: [
					{selected:true,name:"不限"},
					{selected:false,name:"国产"},
					{selected:false,name:"合资"},
					{selected:false,name:"进口"},
				],
				car_list:[
						{
							selected : true,
							name: "不限"
						}, 
				        {
							selected : false,
							name: "国产车"
						}, 
						{
							selected : false,
							name: "德系车"
						},
						{
							selected : false,
							name: "日系车"
						}, 
						{
							selected : false,
							name: "欧系车"
						},
						{
							selected : false,
							name: "法系车"
						},
						{
							selected : false,
							name: "美系车"
						},
						{
							selected : false,
							name: "韩系车"
						},	
				],
				mile_list:[
				        {
							selected : true,
							name: "不限"
						}, 
						{
							selected : false,
							name: "0-2万公里"
						},
						{
							selected : false,
							name: "2-5万公里"
						}, 
						{
							selected : false,
							name: "5-10万公里"
						},
						{
							selected : false,
							name: "10-15万公里"
						},
						{
							selected : false,
							name: "15万公里以上"
						},	
				],
				color_list:[
						{selected : true,name: "不限"}, 
				        {selected : false,name: "黑色"}, 
						{selected : false,name: "白色"},
						{selected : false,name: "银白色"}, 
						{selected : false,name: "红色"},
						{selected : false,name: "蓝色"},
						{selected : false,name: "银色"},	
						{selected : false,name: "橙色"},
						{selected : false,name: "紫色"},
						{selected : false,name: "香槟金色"},	
						{selected : false,name: "灰色"},
						{selected : false,name: "棕色"},
						{selected : false,name: "绿色"},
						{selected : false,name: "黄色"},
						{selected : false,name: "米色"},
				],
				ctype_list: [{
					selected : true,
					value : 0,
					title: "不限"
				}],
				label_list : [{
					selected : true,
					id : 0,
					title: "不限"
				}],	
				ori : '',
			}
		},
		onUnload() {
			this.to_clear();
		},
		onLoad(opt) {
			this.ori = opt.ori || '';
			// this.ctype_list = [...this.ctype_list,...this.vuex.appInfo.ctypes];
			// this.label_list = [...this.label_list,...this.vuex.appInfo.labels];
		},
		methods: {
			price_change(e){
				this.search_words[1].key = e;
				this.search_words[1].value = e;
			},
			output_change(e){
				this.search_words[3].key = e;
				this.search_words[3].value = e;
			},
			to_sure(){
				this.throttle(this.real_sure(), 1500);
			},
			backPage() {
				uni.navigateBack({});
			},
			real_sure(){
				//let url = this.site_url + 'api/index/car_screen';
				if(this.ori != ''){
					let evstr = this.ori+'_screen';
					console.log(evstr)
					uni.$emit(evstr,this.search_words)		
				}	
				setTimeout(()=>{
					this.backPage();
				},600)				
				//let params = JSON.stringify(this.search_words);	
			},
			to_clear(){
				const params = [this.label_list,this.ctype_list,this.age_list,this.mile_list,this.color_list,this.car_list,this.factory_list,this.out_list,this.energy_list,this.label_list];
				this.init_search(params);
			},
			init_search(arr){
				this.price = 0;
				this.output = 0;
				for(let list of arr){
					 list.map((vo,idx)=>{		 
					      (idx == 0) ?vo.selected = true : vo.selected = false;
				     });	
				}
				this.search_words = [
					{key:0, name: 'ctype_idx',value:''},
					{key:0, name: 'price_idx',value:''},
					{key:0, name: 'age_idx',value:''},
					// {key:0, name: 'price_idx',value:''},
					{key:0, name: 'ouput_idx',value:''},
					{key:0, name: 'mile_idx',value:''},
					{key:0, name: 'color_idx',value:''},
					{key:0, name: 'car_idx',value:''}, //国别
					{key:0, name: 'out_idx',value:''},
					{key:0, name: 'energy_idx',value:''},
					{key:0, name: 'label_idx',value:''},
				];
			},
			setmoreMenu(list, index,num=''){
				list.forEach(item => {
					this.$set(item, 'selected', false);
				})
				this.$set(list[index], 'selected', true);
				if(num !== ''){
					this.search_words[num].key = index;
					this.search_words[num].value = list[index].id;
				}
			},
			setContentMenu(list, index,num='') {
				list.forEach(item => {
					this.$set(item, 'selected', false);
				})
				this.$set(list[index], 'selected', true);
				if(num !== ''){
					this.search_words[num].key = index;
					if(num == 0){
						this.search_words[num].value = list[index].value;
					}else{
						this.search_words[num].value = list[index].name;
					}
				}
			},
			sliderChange(e) {
			    this.price = e.detail.value;
				this.search_words[1].key = e.detail.value;
				this.search_words[1].value = e.detail.value;
			},
			sliderChangeOut(e){
				this.output = e.detail.value;
				this.search_words[3].key = e.detail.value;
				this.search_words[3].value = e.detail.value;
			},
			throttle(fn, delay) {
			  let timer = null;
			  return function() {
				let context = this, args = arguments;
				if (!timer) {
				  timer = setTimeout(() => {
					fn.apply(context, args);
					timer = null;
				  }, delay);
				}
			  };
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
	.title_box {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		width: 100%;
		text-indent: 20px;
		height: 50px;
		line-height: 50px;
	}
	.title_box01 {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		width: 100%;
		height: 50px;
		line-height: 50px;
	}

	.nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.nav::after {
		flex: auto;
		content: "";
	}

	.nav .menu {
		width: 27%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 4px;
		background-color: #f4f4f4;
		flex-basis: auto;
		margin-right: 5px;
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
		margin-left: 4%;
		box-sizing: border-box;
		border: 1px solid #f4f4f4;

	}

	.footer {
		width: 100%;
		height: 70px;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #F5F5F5;
		background-color: #fff;
	}

	.footer .clear {
		width: 20%;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		color: #7D7D7D;
		background-color: #F5F5F5;
		border-radius: 6px;
		margin-top: 10px;
		margin-right: 10px;
		text-align: center;
	}

	.footer .define {
		width: 70%;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		color: #fff;
		background-color: #FC5D20;
		border-radius: 6px;
		margin-top: 10px;
		text-align: center;

	}

	.selected {
		background-color: #FC5D20 !important;
		color: #fff !important;
	}
	.diyi{
		width: 94%;
		margin: auto;
	}
	.mokuai{
		display: flex;
		justify-content: space-between;
		width: 94%;
		margin: auto;
		font-size: 3.5vw;
		color: #666;
	}
</style>
